<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" href="webjars/bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="webjars/bootstrapvalidator/0.5.3/css/bootstrapValidator.css">
<link rel="stylesheet" href="webjars/bootstrap-table/1.16.0/bootstrap-table.css">
<link rel="stylesheet" href="static/treeview/src/css/bootstrap-treeview.css">
<link rel="stylesheet" href="webjars/jquery.treegrid/0.2.1/css/jquery.treegrid.css">
<script type="text/javascript" src="webjars/jquery/3.5.1/dist/jquery.js"></script>
<script type="text/javascript" src="webjars/bootstrap/3.3.7/js/bootstrap.js"></script>
<script type="text/javascript" src="webjars/bootstrap-table/1.16.0/bootstrap-table.js"></script>
<script type="text/javascript" src="webjars/bootstrap-table/1.16.0/locale/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript" src="webjars/bootstrap-table/1.16.0/extensions/treegrid/bootstrap-table-treegrid.js"></script>
<script type="text/javascript" src="webjars/jquery.treegrid/0.2.1/js/jquery.treegrid.js"></script>
<script type="text/javascript" src="static/treeview/src/js/bootstrap-treeview.js"></script>
<script type="text/javascript" src="webjars/bootbox/5.4.0/bootbox.all.js"></script>
<script type="text/javascript" src="webjars/bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
<script type="text/javascript" src="webjars/bootstrapvalidator/0.5.3/js/language/zh_CN.js"></script>
<script type="text/javascript" src="static/custom/custom.js"></script>
<script type="text/javascript" src="static/custom.js"></script>

		<style type="text/css">
a, a:hover, a:focus {
	color: #ffffff;
	text-decoration: none;
}

.panel-group {
	background-color: #404040;
	width: 250px;
	height: 700px;
	overflow-y: auto;
}

.panel-group .panel {
	background-color: #404040;
	border: none;
}

.panel-heading {
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
}

.panel-default>.panel-heading {
	border: none;
	color: #ffffff;
	background-color: #505050;
}

.panel-default>.panel-heading>span {
	font-size: 10px;
}

.panel-default>.panel-heading:active, .panel-default>.panel-heading:hover
	{
	background-color: #4a8bc2;
}

.panel-default>.panel-heading>a:hover {
	text-decoration: none;
	background-color: #4a8bc2;
}

.panel-group .panel-heading+.panel-collapse>.panel-body {
	border: none;
}

.panel-body {
	padding: 0px;
}

div.center .nav>li {
	padding: 1px 0px 0px 0px;
}

div.center .nav>li>a {
	text-decoration: none;
	padding: 10px 10px 10px 35px;
}

.nav>li>a:hover, .nav>li>a:focus {
	background-color: #505050;
}

hr {
	margin-top: 5px;
	margin-bottom: 10px;
}

.pagination>li>a {
	color: #404040;
}

.pagination>.active>a {
	background-color: #404040;
	border-color: #404040;
}

.panel-body ul li a {
	cursor: pointer;
}

.form-control[readonly] {
	background-color: #FFFFFF;
	opacity: 1;
}

.btn-primary {
    color: #fff;
    background-color: #404040;
    border-color: #404040;
}

span.input-group-btn>.btn-default {
    color: #FFFFFF;
    background-color: #404040;
    border-color: #404040;
}
div.center .nav > li > a.active {
	background-color:#777;
}

thead>tr{
	background-color: #404040;
	color: #fff;
}

span.input-group-btn>.btn{
	padding: 6px 10px;
}

.dropdown-menu > .active > a{
	background-color: #404040;
}
</style>
</head>
<body style="height: 100vh; display: flex; flex-direction: column;">
	<nav class="navbar navbar-default"
		style="padding: 0 55px 0 55px; margin-bottom: 0px;">
		<div class="container-fluid">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<a class="navbar-brand" href="javascript:work();">成绩管理系统</a>
			</div>
		
			<div class="collapse navbar-collapse"
				id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">
					 <li><a id="xianshi" href="javascript:hid();"><span class="glyphicon glyphicon-th-list"></span></a></li>
				</ul>
				<form class="navbar-form navbar-left"></form>
				 <div sec:authorize="hasRole('ROLE_STUDENT')" id="stuphoto"  class="navbar-header" style="float:right ;">
     			 <a class="navbar-brand"  href="javascript:ckimg2();"  style="padding: 6px 15px;">
      			   
     			 </a>
   				 </div>
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#">欢迎你</a></li>
					<li class="dropdown"><a href="#" class="dropdown-toggle"
						data-toggle="dropdown" role="button" aria-haspopup="true"
						aria-expanded="false"><span
							sec:authentication="principal.name"></span><span class="caret"></span></a>
						<ul class="dropdown-menu">
							<li><a href="javascript:xgpwd()"><span class=" glyphicon glyphicon-lock "></span> 修改密码</a></li>
							<li><a href="logout"><span class="glyphicon glyphicon-log-out"></span> 注销</a></li>
					</ul></li>
				</ul>
				
			</div>
			
			<!-- /.navbar-collapse -->
		</div>
		<!-- /.container-fluid -->
	</nav>
	<div class="center" style="flex: 1;display: flex;">
		<div id="menu1" class="col-md-1" style="background-color: #404040; height: 100%;padding: 0;width: 20px;display:none">
			<span class="glyphicon glyphicon-chevron-right" style="color:#fff;margin: 6px 2px;"></span>
		</div>
		<div id="menu" class="col-md-1" style="background-color: #ddd; height: 100%;padding: 0;width: 160px;">
					<div class="panel-group" id="panelContainer" style="margin-bottom: 0px;width: 100%;height: 100%;">
			<div class="panel panel-default">
				<div id="header1" class="panel-heading" data-toggle="collapse" data-target="#sub1" data-parent="#panelContainer">
					<i class="glyphicon glyphicon-list-alt"></i>
					<a href="#">成绩管理</a>
					<span class="glyphicon glyphicon-triangle-right pull-right"></span>
				</div>
				<div id="sub1" class="collapse panel-collapse" >
					<div class="panel-body" >
						<ul class="nav" >
							<li sec:authorize="hasRole('ROLE_TEACHER')||hasRole('ROLE_ADMIN')">
								<a src="grade/classGrade">班级成绩录入</a>
							</li>
							<li sec:authorize="hasRole('ROLE_TEACHER')||hasRole('ROLE_ADMIN')">
								<a src="grade/xsClassGrade">个人成绩录入</a>
							</li>
							<li sec:authorize="hasRole('ROLE_TEACHER')||hasRole('ROLE_ADMIN')">
								<a src="grade/allGrade">班级成绩查询</a>
							</li>
							<li sec:authorize="hasRole('ROLE_STUDENT')">
								<a src="grade/peasonGrade">个人成绩查询</a>
							</li>
							<li sec:authorize="hasRole('ROLE_STUDENT')">
								<a src="grade/peasonGradeCjb">班级成绩查询</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div sec:authorize="hasRole('ROLE_ADMIN')"  class="panel panel-default">
				<div id="header2" class="panel-heading" data-toggle="collapse" data-target="#sub2" data-parent="#panelContainer">
					<i class="glyphicon glyphicon-book"></i>
					<a href="#">系统管理</a>
					<span class="glyphicon glyphicon-triangle-right pull-right"></span>
				</div>
				<div id="sub2" class="collapse panel-collapse">
					<div  class="panel-body">
						<ul class="nav">
							<li>
								<a src="course/manage">课程管理</a>
							</li>
							<li>
								<a src="tbclass/manage">班级管理</a>
							</li>
							<li>
								<a src="xuesheng/manage">学生管理</a>
							</li>
							<li>
								<a src="teacher/laoshi">教师管理</a>
							</li>
							<li>
								<a src="dept/manage">部门管理</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			
		</div>
 
		<script>
			 $(window).resize(function(){
				 var divhh=$('div.center').height();
				var height=divhh-($('#header1').outerHeight(true))*2-5;
				$("div.panel-body").attr('style',"height:"+height+"px");
		  	 })
				  	 
			function ckimg2(id){
				 $.post('grade/peasonId',function(id){
				var dialog=$.createDialog({
					title:'照片',
					buttons:[$.createBtn({
						iconCls:'glyphicon glyphicon-remove',
						text:'关闭',
						btnCls:'btn btn-primary',
						isCloseBtn:true
					})]
				}).on('hidden.bs.modal',function(){
					dialog.remove();
				})
				var img=$('<img/>');
				img.attr('src','xuesheng/download?id='+id);
				img.attr('alt','暂无照片！  请找班主任(辅导员)上传');
				img.attr('width','100%');
				dialog.find('.modal-body').append(img);
				dialog.modal('show');
				 })
			}
		  	 
		
			$(function() {

				if(!($('#stuphoto').length==0)){
					$.post('grade/peasonId',function(data){
						var stuimg=$('<img alt="暂无照片"  class="img-circle" src="" style="width: 38px;height: 38px;margin-left: 30px;font-size:13px"/>');
						stuimg.attr('src',"xuesheng/download?id="+data);
						$('#stuphoto').find('a.navbar-brand').append(stuimg);
						
					})
				}
				
				
				var divhh=$('div.center').height();
				var height=divhh-($('#header1').outerHeight(true))*2-5;
				$("div.panel-body").attr('style',"height:"+height+"px");
				$('#header1').click();
				$('#header1').find('span').removeClass("glyphicon glyphicon-triangle-right");
				$('#header1').find('span').addClass("glyphicon glyphicon-triangle-bottom");
				$(".panel-heading").on("click", function(e) {
					var idLength = e.currentTarget.id.length;
					var index = e.currentTarget.id.substr(idLength - 1, idLength);
					$("#sub" + index).on('hidden.bs.collapse', function() {
						$(e.currentTarget).find("span").removeClass("glyphicon glyphicon-triangle-bottom");
						$(e.currentTarget).find("span").addClass("glyphicon glyphicon-triangle-right");
					})
					$("#sub" + index).on('shown.bs.collapse', function() {
						$(e.currentTarget).find("span").removeClass("glyphicon glyphicon-triangle-right");
						$(e.currentTarget).find("span").addClass("glyphicon glyphicon-triangle-bottom");
					})
				})
				
				$(".panel-body > .nav > li > a").on("click", function(e) {
					$(".panel-body > .nav > li > a").removeClass();
					$(this).attr('class','active');
					
					var o=document.getElementById('work'); 		
					o.innerHTML='';
						var self = $(this);
						var url=self.attr("src");
						
						$('#work').load(url);
							
						
				});

				});	

				

			function work(){
				var o=document.getElementById('work'); 		
				o.innerHTML='';
				var szxt=$('<div class="container-fluid" style="height: 100%;"><div class="jumbotron" style="background-image:url(static/123.jpg);margin:auto; margin-top:4.8%;height: 69%; width: 90%"><h1>成绩管理系统</h1><p>score management system</p></div></div>');
				$('#work').append(szxt);
			}
			
			function xgpwd(){
				var dialog2=$.createDialog({
					url:'pwd/edit',
					onsubmit:function(e){e.preventDefault()},
					title:'修改密码',
					buttons:[$.createBtn({
						iconCls:'glyphicon glyphicon-ok',
						text:'保存',
						btnCls:'btn btn-primary',
						handler:function(){
							var form=dialog2.find('form');
							var params=form.serialize();
							var validator=form.data('bootstrapValidator');
							validator.validate();
							if(validator.isValid()){
								$.post('pwd/save',params,function(data){
									dialog2.modal("hide");
									window.location='logout';
								})
								
							}
						}
					}),$.createBtn({
						iconCls:'glyphicon glyphicon-remove',
						text:'关闭',
						isCloseBtn:true
					})]
				}).on('hidden.bs.modal',function(){
					dialog2.remove();
				})
				dialog2.modal('show');
			}
			
			function hid(){
				$('#xianshi').attr('href','javascript:()');
				var height=$('div.center').height();
				var width=$('#menu').outerWidth(true);
				if($('#menu').css('display')=='none'){
					$('#xianshi').find('span').attr('class','glyphicon glyphicon-th-list')
					$('#menu').show();	
					$('#menu1').hide();
					$('#menu').animate({left: "+="+width+"" },270,function(){
						$('#xianshi').attr('href','javascript:hid()');
					});
					$('#menu1').unbind('mouseleave').unbind('mouseenter');
					$('#menu').unbind('mouseleave').unbind('mouseenter');
				}else{
					$('#xianshi').find('span').attr('class','glyphicon glyphicon-indent-left')
					$('#menu').animate({left: "-="+width+"" },270,function(){
						$('#menu1').animate({width:'toggle'},180,function(){});
						$('#menu').hide();
						$('#xianshi').attr('href','javascript:hid()');
					});
					
					
					$("#menu1").mouseenter(function(){
						$('#menu1').hide();
						$('#menu').show();
						$('#menu').animate({left: "+="+width+"" },270,function(){
							$('#menu').mouseleave(function(){
								$('#menu').animate({left: "-="+width+"" },270,function(){
									$('#menu1').animate({width:'toggle'},180,function(){});
									$('#menu').hide();
								});
								$('#menu').unbind('mouseleave').unbind('mouseenter');
							});
						});
						
					});
					
				}
			}
			
			
		</script>
		</div>
		<div id =work class="col-md-11" style="height: 100%;flex: 1">
			<div class="container-fluid" style="height: 100%;">
			<div class="jumbotron" style="background-image:url(static/123.jpg);margin:auto; margin-top:4.8%;height: 69%; width: 90%">
  				<h1>成绩管理系统</h1>
  				<p>score management system</p>
			</div>
			</div>
		</div>
	</div>
	<nav class="navbar navbar-default"
		style="width: auto; text-align: center; float: none; margin-bottom: 0px;">
		<div class="container-fluid">
			<div class="navbar-header"></div>
			<div class="collapse navbar-collapse"
				id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav"
					style="display: inline-block; float: none;">
					<li><a href="#">19级软件3班-孙泽鑫韬</a></li>
				</ul>
				<form class="navbar-form navbar-left"></form>
				<ul class="nav navbar-nav navbar-right">

				</ul>
			</div>
		</div>
	</nav>
</body>
</html>